<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>检测两个div是否重叠</title>
	<style>
		.test {
			width: 100px;
			height: 100px;
			border: 1px solid red;
			position: absolute;
		}
		.aa {border: 2px solid green;}
		.bb {left: 90px;}
		.test_wrap {position: relative;margin: 20px auto;width: 600px;height: 200px;text-align: center;	}
	</style>
</head>
<body>
	
	<div class="test_wrap">
		<div class="aa test"></div>
		<div class="bb test"></div>
	</div>



	<script src="./lib/jquery-1.11.3.min.js"></script>
	<script>
		$(function() {
			console.log($('.aa').position());
			function testDivOverlap($div1,$div2) {
				var ftX1 = $div1.position().left,	
					ftX2 = ftX1+$div1.outerWidth(),
					ftY1 = $div1.position().top,
					ftY2 = ftY1+$div1.outerHeight(),
					sdX1 = $div2.position().left,	
					sdX2 = sdX1+$div2.outerWidth(),
					sdY1 = $div2.position().top,
					sdY2 = sdY1+$div2.outerHeight();

				if(   ( sdX1<=ftX2&&sdX1>=ftX1||sdX2>=ftX1&&sdX2<=ftX2 ) && ( sdY1>=ftY1&&sdY1<=ftY2||sdY2>=ftY1&&sdY2<=ftY2 )   ) {
					console.log('我曹重合了！！');
				} else {
					console.log('没有重合');
				}

			}
			// testDivOverlap($('.aa'),$('.bb'));
			window.testDivOverlap = testDivOverlap;

			function zcDrag($obj) {
				$obj[0].onmousedown = function(ev) {
					// console.log(ev);
					var currX = ev.clientX,
						currY = ev.clientY,
						disX = currX-$obj.position().left,
						disY = currY-$obj.position().top;

					document.onmousemove = function(ev) {
						// console.log(ev);
						var L = ev.clientX-disX,
							T = ev.clientY - disY;
						$obj.css({'left':(L+'px'),'top':(T+'px')});
						testDivOverlap($('.aa'),$('.bb'));
					}
					document.onmouseup = function(ev) {

						document.onmousemove = document.onmouseup = null;
					}
				}
				
			}
			zcDrag($('.aa'));
		})
		$.ajax({
			url:'http://106.14.239.40:9090/api/dt/cityall',
			success:function(res) {
				console.log(res);
			}
		});
		$.ajax({
				type:"POST",
				contentType:"application/json;charset=UTF-8",
				url:'http://106.14.239.40:9090/api/dt/hotcitys',
				success:function(res) {
					console.log(res);
				},
				error:function(xhr) {
					console.log('wx ajax error');
				}
			})
	</script>
</body>
</html>